<!-- 设备巡检-巡检规则-新增/编辑/复制页面 -->
<template>
  <div v-if="!isMain && !isView" class="add-equip-detail">
    <px-scrollbar class="add-equip-content">
      <px-button style="margin-top: 16px" type="primary" icon="ArrowLeft" @click="cancelMainPage">返回</px-button>
      <EditDropDown dropdownTitle="基础信息">
        <template v-slot:content>
          <px-form ref="formRef" :inline="true" :model="formValue" :rules="baseInfoRules" label-position="right" label-width="120px">
            <px-row>
              <px-col :span="8">
                <px-form-item label="巡检规则编号" prop="checkRuleNo">
                  <px-input v-model="formValue.checkRuleNo" placeholder="请输入巡检规则编号" maxlength="50" clearable disabled />
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="巡检规则名称" prop="checkRuleName">
                  <px-input v-model="formValue.checkRuleName" placeholder="请输入巡检规则名称" maxlength="50" clearable />
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="地块" prop="facCode">
                  <px-select v-model="formValue.facCode" placeholder="请选择地块" filterable clearable @change="changeFacCode">
                    <px-option v-for="item in props.facCodeList" :key="item.id" :label="item.name" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="巡检对象" prop="checkTypeName">
                  <px-input v-model="formValue.checkTypeName" placeholder="请输入巡检对象" maxlength="50" disabled />
                </px-form-item>
              </px-col>
              <px-col :span="8" v-if="formValue.checkType === 'equipment' || formValue.checkType === ''">
                <px-form-item label="设备类型" prop="eqpTypeCodes">
                  <px-tree-select
                    v-model="formValue.eqpTypeCodes"
                    filterable
                    clearable
                    placeholder="请选择设备类型"
                    :props="{
                      children: 'children',
                      label: 'name',
                      value: 'code'
                    }"
                    node-key="id"
                    :default-expanded-keys="['0']"
                    :data="props.eqpTypeCodeList"
                    :render-after-expand="false"
                  />
                </px-form-item>
              </px-col>
              <px-col :span="8" v-if="formValue.checkType === 'environment'">
                <CheckArea :checkArea="formValue.eqpTypeCodes" :isRequired="true" :fac-code="formValue.facCode" @changeCheckArea="changeCheckArea" />
              </px-col>
              <px-col :span="8">
                <px-form-item label="规则类型" prop="ruleType">
                  <px-select v-model="formValue.ruleType" placeholder="请选择巡检类型" filterable clearable>
                    <px-option v-for="item in ruleTypeList" :key="item.value" :label="item.name" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
              <px-col :span="24">
                <px-form-item label="备注" prop="remark">
                  <px-input v-model="formValue.remark" :rows="3" type="textarea" placeholder="请输入备注" maxlength="1000" clearable />
                </px-form-item>
              </px-col>
            </px-row>
          </px-form>
        </template>
      </EditDropDown>
      <div style="margin-top: 24px; color: rgba(0, 0, 0, 0.8); font-weight: bold">巡检规则内容</div>
      <px-form ref="checkRuleContentFormRef" :model="checkRuleContentList">
        <div v-for="(item, index) in checkRuleContentList" :key="index">
          <EditDropDown :dropdownTitle="item.isTableEdit === 'edit' ? '巡检项目' : item.checkItemContent">
            <template v-slot:btn>
              <px-button v-if="item.isTableEdit === 'view'" link type="primary" @click="editTable(index)">编辑</px-button>
              <px-popconfirm
                width="220"
                confirm-button-text="删除"
                cancel-button-text="取消"
                confirm-button-type="danger"
                cancel-button-type="info"
                :icon="WarningFilled"
                icon-color="#f59e0c"
                title="是否要删除当前内容?"
                :teleported="false"
                @confirm="deleteTable(index, item.id)"
              >
                <template #reference>
                  <px-button v-if="item.isTableEdit === 'view'" link type="danger">删除</px-button>
                </template>
              </px-popconfirm>
              <px-button v-if="item.isTableEdit === 'edit'" link type="primary" @click="saveTable(checkRuleContentFormRef, index)">保存</px-button>
              <px-popconfirm
                width="220"
                confirm-button-text="确认"
                cancel-button-text="取消"
                confirm-button-type="primary"
                cancel-button-type="info"
                :icon="InfoFilled"
                icon-color="#919399"
                title="内容没保存，确认取消?"
                :teleported="false"
                @confirm="cancelTable(index)"
              >
                <template #reference>
                  <px-button v-if="item.isTableEdit === 'edit'" link type="primary">取消</px-button>
                </template>
              </px-popconfirm>
            </template>
            <template v-slot:content>
              <px-form-item
                v-if="item.isTableEdit === 'edit'"
                label="巡检项内容"
                :prop="index + '.checkItemContent'"
                :rules="[{ required: true, message: '巡检项内容不能为空', trigger: 'blur' }]"
              >
                <px-input v-model="item.checkItemContent" placeholder="请输入巡检项内容" maxlength="50" clearable />
              </px-form-item>
              <px-table
                :data="item.checkRuleContentItemList"
                class="equip-table"
                :class="item.isTableEdit === 'view' ? 'inspect-table-view' : 'inspect-table-edit'"
                size="small"
                border
              >
                <px-table-column v-if="item.isTableEdit === 'view'" fixed="left" type="index" label="序号" width="60" />
                <px-table-column fixed="left" prop="checkItem" label="巡检项" min-width="160" show-overflow-tooltip :render-header="renderHeader">
                  <template #default="scope">
                    <template v-if="item.isTableEdit === 'view'">{{ scope.row.checkItem }}</template>
                    <template v-else>
                      <px-form-item
                        label-width="0px"
                        label=""
                        :prop="index + '.checkRuleContentItemList.' + scope.$index + '.checkItem'"
                        :rules="[{ required: true, message: '巡检项不能为空', trigger: 'blur' }]"
                      >
                        <px-input v-model="scope.row.checkItem" placeholder="请输入巡检项" maxlength="50" clearable />
                      </px-form-item>
                    </template>
                  </template>
                </px-table-column>
                <px-table-column prop="checkContent" label="巡检内容" min-width="100" show-overflow-tooltip :render-header="renderHeader">
                  <template #default="scope">
                    <template v-if="item.isTableEdit === 'view'">{{ scope.row.checkContent }}</template>
                    <template v-else>
                      <px-form-item
                        label-width="0px"
                        label=""
                        :prop="index + '.checkRuleContentItemList.' + scope.$index + '.checkContent'"
                        :rules="[{ required: true, message: '巡检内容不能为空', trigger: 'blur' }]"
                      >
                        <px-input v-model="scope.row.checkContent" placeholder="请输入巡检内容" maxlength="500" clearable />
                      </px-form-item>
                    </template>
                  </template>
                </px-table-column>
                <px-table-column prop="checkContentRangeValue" label="内容范围" min-width="160" show-overflow-tooltip :render-header="renderHeader">
                  <template #default="scope">
                    <template v-if="scope.row.checkContentRange !== 4">
                      <template v-if="item.isTableEdit === 'view' && scope.row.checkContentRange === 1">文本</template>
                      <template v-if="item.isTableEdit === 'view' && scope.row.checkContentRange === 2">数字</template>
                      <template v-if="item.isTableEdit === 'view' && scope.row.checkContentRange === 3 && scope.row.checkContentRangeValue">
                        判断：True={{ scope.row.checkContentRangeValue.split(",")[0] }}; False={{ scope.row.checkContentRangeValue.split(",")[1] }}
                      </template>
                      <template v-if="item.isTableEdit === 'edit' && scope.row.checkContentRange === 1">
                        <px-select v-model="scope.row.checkContentRange" placeholder="请选择内容范围" style="width: 100%" filterable>
                          <px-option v-for="item in checkContentRangeList" :key="item.value" :label="item.label" :value="item.value" />
                        </px-select>
                      </template>
                      <template v-if="item.isTableEdit === 'edit' && scope.row.checkContentRange === 2">
                        <px-select v-model="scope.row.checkContentRange" placeholder="请选择内容范围" style="width: 100%" filterable>
                          <px-option v-for="item in checkContentRangeList" :key="item.value" :label="item.label" :value="item.value" />
                        </px-select>
                      </template>
                      <div v-if="item.isTableEdit === 'edit' && scope.row.checkContentRange === 3" style="display: flex; align-items: center">
                        <px-select v-model="scope.row.checkContentRange" placeholder="请选择内容范围" style="width: 20%" filterable>
                          <px-option v-for="item in checkContentRangeList" :key="item.value" :label="item.label" :value="item.value" />
                        </px-select>
                        &nbsp;&nbsp;True=
                        <px-form-item
                          style="width: 25%"
                          label-width="0px"
                          label=""
                          :prop="index + '.checkRuleContentItemList.' + scope.$index + '.checkContentRangeValue1'"
                          :rules="[
                            {
                              required: item.isTableEdit === 'edit' && scope.row.checkContentRange === 3,
                              message: 'True值不能为空',
                              trigger: 'blur'
                            }
                          ]"
                        >
                          <px-input v-model="scope.row.checkContentRangeValue1" placeholder="请输入内容" maxlength="50" />
                        </px-form-item>
                        &nbsp;&nbsp;False=
                        <px-form-item
                          style="width: 25%"
                          label-width="0px"
                          label=""
                          :prop="index + '.checkRuleContentItemList.' + scope.$index + '.checkContentRangeValue2'"
                          :rules="[
                            {
                              required: item.isTableEdit === 'edit' && scope.row.checkContentRange === 3,
                              message: 'False值不能为空',
                              trigger: 'blur'
                            }
                          ]"
                        >
                          <px-input v-model="scope.row.checkContentRangeValue2" placeholder="请输入内容" maxlength="50" />
                        </px-form-item>
                        &nbsp;&nbsp;
                        <px-tooltip content="无法输入带逗号（','）的字符" placement="top">
                          <px-icon><QuestionFilled /></px-icon>
                        </px-tooltip>
                      </div>
                    </template>
                    <template v-else>
                      <template v-if="item.isTableEdit === 'view'"> 选择：{{ scope.row.checkContentRangeValue }} </template>
                      <template v-else>
                        <px-form-item
                          label-width="0px"
                          label=""
                          :prop="index + '.checkRuleContentItemList.' + scope.$index + '.checkContentRangeValue'"
                          :rules="[
                            {
                              required: item.isTableEdit === 'edit' && scope.row.checkContentRange === 4,
                              validator: checkRangeCode,
                              trigger: 'blur'
                            }
                          ]"
                        >
                          <px-input
                            v-model="scope.row.checkContentRangeValue"
                            placeholder="请输入选项，并以英文逗号（','）分割"
                            maxlength="50"
                            style="width: 90%"
                          >
                            <template #prepend>
                              <px-select v-model="scope.row.checkContentRange" placeholder="请选择内容范围" style="width: 120px" filterable>
                                <px-option v-for="item in checkContentRangeList" :key="item.value" :label="item.label" :value="item.value" />
                              </px-select>
                            </template>
                          </px-input>
                          &nbsp;&nbsp;
                          <px-tooltip content="以英文逗号（','）分割" placement="top">
                            <px-icon><QuestionFilled /></px-icon>
                          </px-tooltip>
                        </px-form-item>
                      </template>
                    </template>
                  </template>
                </px-table-column>
                <px-table-column v-if="item.isTableEdit === 'edit'" fixed="right" label="操作" width="60" align="center">
                  <template #default="scope">
                    <px-button
                      link
                      type="danger"
                      icon="Delete"
                      :disabled="scope.$index === 0 && checkRuleContentList[index].checkRuleContentItemList.length === 1"
                      @click="deleteItem(index, scope.$index)"
                    />
                  </template>
                </px-table-column>
              </px-table>
              <div
                v-if="item.isTableEdit === 'edit'"
                style="
                  width: 100%;
                  height: 32px;
                  margin-bottom: 18px;
                  line-height: 32px;
                  color: #3b82f6;
                  text-align: center;
                  cursor: pointer;
                  border: 1px dashed #3b82f6;
                  border-radius: 4px;
                "
                @click="addTableItem(index)"
              >
                新增巡检项
              </div>
            </template>
          </EditDropDown>
        </div>
      </px-form>
      <div style="display: flex; margin-top: 16px">
        <px-button style="margin-right: -8px" type="primary" v-if="showCheckRuleContent" @click="addTable">新增巡检项目</px-button>
        <px-button style="margin-right: 8px" type="primary" v-if="showCheckRuleContent" plain @click="templateDownload">下载模板</px-button>
        <BatchUpload
          v-if="showCheckRuleContent"
          :needResponse="true"
          url="/ifp/erc/api/v1/checkRule/importCheckItem"
          @updateUploadPage="getContentList"
        />
      </div>
    </px-scrollbar>
    <div class="info-form-btns">
      <px-button @click="cancelMainPage">取消</px-button>
      <px-button type="primary" :disabled="saveContentDisabled" @click="handleSubmit(formRef, checkRuleContentFormRef)">保存</px-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, watch, computed, h, getCurrentInstance } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import BatchUpload from "@/components/Upload/BatchUpload.vue";
import CheckArea from "./CheckArea.vue";
import { queryDictData } from "@/api/erc/common";
import { getInspectRuleNo, getInspectRule, addInspectRule, editInspectRule } from "@/api/erc/inspect";
import { InfoFilled, WarningFilled } from "@px-ui/icons-vue";
import { cloneDeep, isEqual } from "@pureadmin/utils";

const { proxy }: any = getCurrentInstance();
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "addType", "detailPageType", "checkRuleNo", "facCodeList", "eqpTypeCodeList"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 展示新增抄表类、新增判断类
const showCheckRuleContent = computed(() => {
  if (
    checkRuleContentList.value.length === 0 ||
    checkRuleContentList.value.every(item => {
      return item.isTableEdit === "view";
    })
  ) {
    return true;
  }
  return false;
});
// 巡检内容禁用条件
const saveContentDisabled = computed(() => {
  if (checkRuleContentList.value.length === 0) return true;
  if (
    checkRuleContentList.value.every(item => {
      return item.isTableEdit === "view";
    })
  ) {
    return false;
  }
  return true;
});

// 页面本身的值
const state = reactive<any>({
  // 第1步：基础信息
  formRef: null, // 基础信息ref
  formValue: {
    checkRuleNo: "",
    checkRuleName: "",
    facCode: "",
    eqpTypeCodes: "",
    ruleType: "",
    remark: ""
  }, // 基础信息form表单
  ruleTypeList: [], // 基础信息巡检类型列表
  // 第2步：巡检内容
  checkRuleContentFormRef: null,
  checkRuleContentList: [], // 巡检内容总表格，可以遍历
  checkRuleTempData: {}, // 临时保存巡检内容表格数据，为了取消使用
  checkContentRangeList: [
    { label: "文本", value: 1 },
    { label: "数字", value: 2 },
    { label: "判断", value: 3 },
    { label: "选择", value: 4 }
  ], // 巡检内容范围列表
  isCancel: false,
  differContent: null
});
const {
  formRef,
  formValue,
  ruleTypeList,
  checkRuleContentFormRef,
  checkRuleContentList,
  checkRuleTempData,
  checkContentRangeList,
  isCancel,
  differContent
} = toRefs(state);
// 表单校验规则-基础信息
const baseInfoRules = computed(() => ({
  checkRuleNo: [{ required: true, message: "巡检规则编号不能为空", trigger: "blur" }],
  checkRuleName: [{ required: true, message: "巡检规则名称不能为空", trigger: "blur" }],
  facCode: [{ required: true, message: "地块不能为空", trigger: "change" }],
  eqpTypeCodes: [{ required: true, message: "设备类型不能为空", trigger: "change" }],
  ruleType: [{ required: true, message: "巡检类型不能为空", trigger: "change" }]
}));
// 判断类-内容范围-选择
const checkRangeCode = (rule: any, value: any, callback: any) => {
  if (value == "") {
    callback(new Error("选项不能为空"));
  } else if (!/,/.test(value)) {
    callback(new Error("请输入选项，并以英文逗号（','）分割"));
  } else {
    callback();
  }
};

// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && !props.isView) {
    ruleTypeList.value = await queryDictData({ typeCode: "ERC_CHECK_RULE_TYPE" });
    if (props.detailPageType === "add") {
      formRef.value?.resetFields();
      const data = await getInspectRuleNo();
      formValue.value.checkRuleNo = data;
      formValue.value.checkType = props.addType;
      formValue.value.checkTypeName = props.addType === "equipment" ? "设备" : props.addType === "environment" ? "环境" : "-";
    } else if (props.detailPageType === "edit" || props.detailPageType === "copy") {
      getDetail();
    }
    differContent.value = cloneDeep(formValue.value);
  }
});

// 获取设备巡检详情
const getDetail = async () => {
  const data = await getInspectRule(props.checkRuleNo);
  const dataDetail = JSON.parse(JSON.stringify(data));
  formValue.value.id = dataDetail.id;
  formValue.value.checkRuleName = dataDetail.checkRuleName;
  formValue.value.facCode = dataDetail.facCode;
  formValue.value.checkType = dataDetail.checkType;
  formValue.value.checkTypeName = dataDetail.checkType === "equipment" ? "设备" : dataDetail.checkType === "environment" ? "环境" : "-";
  if (formValue.value.checkType === "equipment") {
    formValue.value.eqpTypeCodes = dataDetail.eqpTypeCodes[0];
  } else if (formValue.value.checkType === "environment") {
    formValue.value.eqpTypeCodes = dataDetail.eqpTypeCodes;
  }
  formValue.value.ruleType = dataDetail.ruleType;
  formValue.value.remark = dataDetail.remark;
  if (props.detailPageType === "edit") {
    formValue.value.checkRuleNo = dataDetail.checkRuleNo;
    // 巡检规则内容
    checkRuleContentList.value = dataDetail.checkRuleContentList || [];
    if (checkRuleContentList.value.length > 0) {
      checkRuleContentList.value.forEach(item => {
        item.isTableEdit = "view";
      });
    }
  } else if (props.detailPageType === "copy") {
    const data = await getInspectRuleNo();
    formValue.value.checkRuleNo = data;
    formValue.value.checkRuleName = "";
    // 巡检规则内容
    checkRuleContentList.value = dataDetail.checkRuleContentList || [];
    if (checkRuleContentList.value.length > 0) {
      checkRuleContentList.value.forEach(item => {
        item.isTableEdit = "view";
        item.checkRuleNo = formValue.value.checkRuleNo;
        if (item.checkRuleContentItemList && item.checkRuleContentItemList.length > 0) {
          item.checkRuleContentItemList.forEach(item2 => {
            item2.checkRuleNo = formValue.value.checkRuleNo;
          });
        }
      });
    }
  }
  differContent.value = cloneDeep(formValue.value);
};
// 保存基础信息、巡检内容
const handleSubmit = async (formEl: any, formEl2) => {
  if (!formEl || !formEl2) return;
  await formEl.validate(async valid => {
    if (valid) {
      await formEl2.validate(async valid2 => {
        if (valid2) {
          // 巡检内容保存
          const params = JSON.parse(JSON.stringify(formValue.value));
          if (typeof params.eqpTypeCodes === "string") {
            params.eqpTypeCodes = [params.eqpTypeCodes];
          }
          params.contentList = checkRuleContentList.value;
          if (props.detailPageType === "add") {
            await addInspectRule(params);
            PxMessage.success("新增成功");
            resetManagePage();
          } else if (props.detailPageType === "edit") {
            await editInspectRule(params);
            PxMessage.success("编辑成功");
            resetManagePage();
          } else if (props.detailPageType === "copy") {
            delete params.id;
            if (params.contentList && params.contentList.length > 0) {
              params.contentList.forEach(item => {
                delete item.id;
                if (item.checkRuleContentItemList && item.checkRuleContentItemList.length > 0) {
                  item.checkRuleContentItemList.forEach(item2 => {
                    delete item2.id;
                  });
                }
              });
            }
            await addInspectRule(params);
            PxMessage.success("复制修改成功");
            resetManagePage();
          }
        }
      });
    }
  });
};
// 返回主页面
const cancelMainPage = () => {
  const differCont = cloneDeep(formValue.value);
  if (isEqual(differContent.value, differCont)) {
    resetManagePage();
    return;
  }
  PxMessageBox.confirm("确认退出页面？退出后内容不会保存", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      resetManagePage();
    })
    .catch(() => {});
};
// 清空全部数据
const resetManagePage = () => {
  formRef.value?.resetFields();
  checkRuleContentFormRef.value?.resetFields();
  formRef.value = null;
  formValue.value = {
    checkRuleNo: "",
    checkRuleName: "",
    facCode: "",
    eqpTypeCodes: "",
    ruleType: "",
    remark: ""
  };
  checkRuleContentFormRef.value = null;
  checkRuleContentList.value = [];
  checkRuleTempData.value = {};
  differContent.value = null;
  emits("backMainPage");
  emits("queryTable");
};

// 新增判断类表格
const addTable = () => {
  isCancel.value = true;
  checkRuleContentList.value.push({
    checkRuleNo: formValue.value.checkRuleNo,
    checkItemContent: "",
    resultType: 1,
    resultTypeDesc: "判断项",
    isTableEdit: "edit",
    checkRuleContentItemList: [
      {
        checkRuleNo: formValue.value.checkRuleNo,
        checkItem: "",
        checkContent: "",
        checkContentRange: 1,
        checkContentRangeValue: ""
      }
    ]
  });
  checkRuleTempData.value[checkRuleContentList.value.length - 1] = JSON.parse(
    JSON.stringify(checkRuleContentList.value[checkRuleContentList.value.length - 1])
  );
};
// 保存判断类表格
const saveTable = async (formEl, index) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      checkRuleContentList.value[index].isTableEdit = "view";
      if (checkRuleContentList.value[index].checkRuleContentItemList && checkRuleContentList.value[index].checkRuleContentItemList.length > 0) {
        checkRuleContentList.value[index].checkRuleContentItemList.forEach(item => {
          if (item.checkContentRange === 3) {
            item.checkContentRangeValue = item.checkContentRangeValue1 + "," + item.checkContentRangeValue2;
          }
        });
      }
    }
  });
};
// 取消判断类表格
const cancelTable = index => {
  if (isCancel.value) {
    checkRuleContentList.value.splice(index, 1);
    checkRuleTempData.value[index] = {};
    isCancel.value = false;
  } else {
    checkRuleContentList.value[index] = checkRuleTempData.value[index];
    checkRuleTempData.value[index] = JSON.parse(JSON.stringify(checkRuleContentList.value[index]));
  }
};
// 编辑判断类表格
const editTable = index => {
  checkRuleContentList.value[index].isTableEdit = "edit";
  checkRuleTempData.value[index] = checkRuleContentList.value[index];
  if (checkRuleContentList.value[index].checkRuleContentItemList && checkRuleContentList.value[index].checkRuleContentItemList.length > 0) {
    checkRuleContentList.value[index].checkRuleContentItemList.forEach(item => {
      if (item.checkContentRange === 3) {
        item.checkContentRangeValue1 = item.checkContentRangeValue.split(",")[0];
        item.checkContentRangeValue2 = item.checkContentRangeValue.split(",")[1];
      }
    });
  }
  checkRuleTempData.value[index] = JSON.parse(JSON.stringify(checkRuleContentList.value[index]));
  checkRuleTempData.value[index].isTableEdit = "view";
};
// 删除判断类表
const deleteTable = (index, id) => {
  checkRuleContentList.value.splice(index, 1);
};
// 新增判断类某一行
const addTableItem = index => {
  checkRuleContentList.value[index].checkRuleContentItemList.push({
    checkRuleNo: formValue.value.checkRuleNo,
    checkItem: "",
    checkContent: "",
    checkContentRange: 1,
    checkContentRangeValue: ""
  });
};
// 删除判断类某一行
const deleteItem = async (index, $index) => {
  checkRuleContentList.value[index].checkRuleContentItemList.splice($index, 1);
};
// 表格头部渲染-添加必填*
const renderHeader = (column: any) => {
  // 在最外层插入一个div标签
  return h(
    "div",
    {
      style: ""
    },
    [
      h(
        "label",
        {
          style: "",
          class: "must"
        },
        column.column.label
      )
    ]
  );
};
// 下载模版
const templateDownload = async () => {
  proxy.download("post", "/erc/api/v1/checkRule/importCheckRuleTemplate", {}, "设备巡检规则模板.xlsx");
};
// 改变巡检区域
const changeCheckArea = val => {
  if (val && val.length > 0) {
    formValue.value.eqpTypeCodes = val.map(item => {
      const ind = item.length - 1;
      return item[ind];
    });
  } else {
    formValue.value.eqpTypeCodes = [];
  }
};
// 改变地块字段
const changeFacCode = val => {
  if (formValue.value.checkType === "environment") {
    formValue.value.eqpTypeCodes = [];
  }
};
// 批量导入规则内容
const getContentList = res => {
  const arr = res?.data || [];
  if (arr.length > 0) {
    arr.forEach(item => {
      item.isTableEdit = "view";
    });
  }
  checkRuleContentList.value.push(...arr);
};
</script>
<style lang="scss" scoped>
@import url("@/views/erc/scss/add-detail.scss");

.add-equip-detail {
  .add-equip-content {
    .inspect-table-view {
      .px-form-item {
        margin-bottom: 0;
      }
    }

    .inspect-table-edit {
      .px-form-item {
        padding-top: 16px;
      }

      :deep(.px-table__cell) {
        padding: 0;
        height: 64px;
        line-height: 64px;
        .cell {
          height: 64px;
          line-height: 64px;
        }
      }

      .px-form-item__content {
        padding-top: 16px;
      }

      :deep(.px-table__header) {
        .must::before {
          margin-right: 4px;
          color: var(--px-color-danger);
          content: "*";
        }
      }
    }
  }
}
</style>
